<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgImage="imgData" :isBack="true"><block slot="backText">返回</block>
				<block slot="content">节目类价位</block>
			</cu-custom>
			
			<view class="cu-list menu sm-border card-menu margin-top margin-bottom">
				<view class="cu-item" style="height: 90px; background-size: 100% 100%; background-repeat: no-repeat; -moz-background-size:100% 100%;"  :style="[{backgroundImage:'url('+imgData+')'}]">
					<view class="content">
						<view class="flex flex-wrap" >
							<text style="color: #fff;font-size: 40upx;font-weight: 300;transform: skew(-10deg, 0deg);position: relative;text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)">{{project.name}}</text>
							<view class="basis-xl">     </view>
							<text class="childTitle">共{{projectNum}}个模块</text>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view hover-class='none' class="nav-li" navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in childList" :key="index">
					<view class="nav-title">{{item.name}}</view>
					<view class="nav-name">{{item.enName}}</view>
					<text :class="'cuIcon-' + item.icon"></text>
					<view class="nav-name">{{item.price}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation:'',
				childList: [],
				project: {},
				imgData: '',
				projectNum: 0
			};
		},
		onLoad(e) {
			this.showProject(e.id)
			this.showChildList(e.id)
		},
		methods: {
			showProject(id) {
				uni.request({
					url: this.serverPath + 'project/postProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.project = res.data.data
						this.imgData = this.project.img
					}
				})
			},
			showChildList(id) {
				uni.request({
					url: this.serverPath + 'project/postChildProjectListByPid',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						pid: id
					},
					success:(res)=> {
						this.childList = res.data.data
						this.projectNum = this.childList.length
					}
				})
			}
		},
	}
</script>

<style scoped>
	.page {
		height: 100vh;
	}
	.cardTitle {
		color: #fff;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.childTitle {
		color: #fff;
		font-size: 28upx;
		font-weight: 200;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.right {
		margin-right: 10upx;
	}
</style>